<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转盘</title>
    <style>
        .box{
            position: relative;
            height: 502px;
            width: 502px;
        }
        .angle{
            position: absolute;
            left: 50%;
            margin-left: -10px;
            top:35%;
            height: 0;
            width: 0;
            border-bottom: 40px solid black;
            border-right: 10px solid transparent;
            border-left: 10px solid transparent;
        }
    </style>
</head>
<body>
<div class="box">
    <canvas width="500" height="500" style="border:1px solid red;background: gray"></canvas>
    <div class="angle"></div>
</div>
<script>
    (function(){
        var canvas = document.querySelector("canvas");
        context = canvas.getContext("2d");
        var colorArr = ["red","orange","yellow","green","cyan","blue","purple","pink","black","#ccc"];
        var fontArr = ["HTML5","Android","java","IOS","js","VR","PHP","angelar","css3","c#"];

        context.translate(250,250);
        var num = 10;
        var arc1 = 0;
        var index = 7;
        var term = setInterval(function(){
            num = num*0.99;
            var num1 = num*2*Math.random();
            context.rotate(num1*Math.PI/180);
            arc1 += num1;
            start();
            if(num<1){
                clearInterval(term);
                term = null;
                var num2 = Math.ceil( (arc1-18)/36%10);
                console.log(num2);
                index = index-num2;
                if(index<0){
                    index = 10 + index;
                }
                alert(fontArr[index]);
            }
        },10);
        //start();
        function start(){
            context.clearRect(0,0,500,500);
            for(i = 1;i<=colorArr.length;i++){
                context.fillStyle = colorArr[i-1];
                context.beginPath();
                context.moveTo(0,0);
                context.arc(0,0,200,36*(i-1)*Math.PI/180,36*i*Math.PI/180,false);
                context.stroke();
                context.fill();
                context.closePath();
            }
            for(i = 0;i<fontArr.length;i++){
                context.save();
                context.fillStyle = "white";
                context.font = "16px 微软雅黑";
                context.beginPath();
                context.rotate(i*36*Math.PI/180);
                context.fillText(fontArr[i],120,50);
                context.closePath();
                context.restore();
            }
            context.beginPath();
            context.fillStyle = "white";
            context.arc(0,0,50,0,360,false);
            context.fill();
            context.closePath();
        }




    })();
</script>
</body>
</html>